<script lang="ts" setup>
import { onMounted, ref } from 'vue';

// ref 获取 DOM 元素时，类型可参考 document.querySelector() 的返回值类型
const h1Ref = ref<HTMLHeadingElement | null>(null)
console.log('setup', h1Ref.value) // null，组件的 DOM 节点还没开始挂载

// 组件的 DOM 节点挂载完毕，可以获取到 DOM 元素
// 温馨提示：后期该语法用于获取到 Vue 组件的实例
onMounted(() => {
  // 鼠标悬停看 querySelector 可以看到返回值的类型
  const h1DOM = document.querySelector('h1')
  console.log(h1DOM)

  console.log('onMounted', h1Ref.value)
  // 调用 DOM 元素的方法的 append 方法
  h1Ref.value?.append('!!!')
})
</script>

<template>
  <h1 class="title" ref="h1Ref">Hello World</h1>
</template>